bootstrap 4 grid system: it is built with flexbox and allows upto 12 columns across the page.

grid classes: .col(576px), .col-sm(>=576px), .col=md(768px), .col-lg(992px), .col-xl(1200px)

Three equal width column

note: please try to add a mew div with the class="col" inside the row class. this will create 4 equal width column

.col
.col
.col
.col

responsive Columns

Resize the browser window to see the effect

it is on limit to 576px

.Col-sm-3
.Col-sm-3
.Col-sm-3
.Col-sm-3

two unequal Responsive columns

like how to get 2 different width starting at tablet , desktop or mobile

2 unequal responsive columns

.Col-sm-4
.Col-sm-8